﻿let doc = new MyCoordinates(500, 500);
var timestamp: number;
let myColor = ColorTransition("449bea");
let nextIco = "";
let data = [10, 10, 10, 10, 10, 10, 10, 10, 10, 50, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
window.onload = () =>
{
    var div = document.getElementById("drawarea") as HTMLDivElement;
    var app = new QuickApp(div);
    app.start(new MyState());
}

function onBuutton2(json: string) {
    data = JSON.parse(json);
}

function next(name: string) {
    nextIco = name;
}


class MyState implements IState
{
    app: QuickApp;
    ico: Ico;
    a1: lighttool.spriteAtlas;
    //time: number;
    segment: Segment;
    is: number = 150;
    isz: number = 0;

    debrisArray: Array<Debris>;
    onInit(app: QuickApp)
    {
      //  this.time = (new Date()).valueOf();
        this.app = app;
        var t = new lighttool.spriteTexture(app.webgl, "res/tianqi.json.txt.json.png");
        this.a1 = new lighttool.spriteAtlas(app.webgl, "res/tianqi.json.txt.json.txt", t);
        this.segment = new Segment(this.app, this.a1);
        this.ico = new Ico(this.app, this.a1);
        this.debrisArray = new Array<Debris>();

    }

    texArea: lighttool.spriteRect = new lighttool.spriteRect();


    onUpdate(delta: number)
    {
        doc.x = this.app.centerx;
        doc.y = this.app.centery;
        this.segment.radius = (doc.x > doc.y ? doc.y : doc.x) * 0.7;
        this.ico.h = doc.y * 0.25 * 2;
        this.ico.w = doc.x * 0.25 * 2;

        if (this.is >= 0) {
            if (this.isz == 2) {
                this.debrisArray.unshift(new Debris(this.app, this.a1));
                this.isz = 0;
                this.is--;
            }
            this.isz++;
        }
        
   
        if (this.app.sb != null) {
            //let tr = (new Date()).valueOf();
            //tr = 1000 / (tr - this.time);
           // this.time = (new Date()).valueOf();
           // this.app.font.drawText(this.app.sb, "tps=" + tr, new lighttool.spriteRect(0, 0, 1000, 100), lighttool.spriteColor.white);
            for (let i = 0; i < this.debrisArray.length; i++) {
                this.debrisArray[i].onAnimation();
            }
            this.segment.onAnimation();
            this.ico.onAnimation();
            
            this.onDestroy();
        }
    }

    onDestroy() {
        for (let i = this.debrisArray.length - 1; i >= 0; i--){
            if (this.debrisArray[i].distance >= this.app.centery) {
                this.debrisArray[i].init();
            }
        }
    }

    onExit()
    {

    }
}

class Ico {
    app: QuickApp;
    a1: lighttool.spriteAtlas;

    myIco: string;
    state: State;
    angle: number;//角度
    w: number;//大小
    h: number;

    maxW: number;
    maxH: number;

    doc: MyCoordinates;
    rect: lighttool.spriteRect;
    myColor: lighttool.spriteColor;

    A: number;
    animationType: AnimationType;

    constructor(app: QuickApp, a1: lighttool.spriteAtlas) {
        this.a1 = a1;
        this.app = app;
        this.init();
    }

    init() {
        this.myIco = "question";
        this.state = State.START;
        this.angle = 0;
        this.w = 0;
        this.h = 0;
        this.doc = doc;
        this.animationType = AnimationType.DAESALT;
        this.maxH = 200;
        this.maxW = 200;
        this.A = 0.0;
        //this.myColor = new lighttool.spriteColor(myColor.r, myColor.g, myColor.b, this.A);
        this.myColor = new lighttool.spriteColor(1,1,1,1);
        this.rect = new lighttool.spriteRect(this.doc.x, this.doc.y, this.w, this.h);
    }

    onAnimation() {
        
        this.rect.h = this.h;
        this.rect.w = this.w;
        this.rect.x = this.doc.x;
        this.rect.y = this.doc.y;
        this.onStateCut();
        switch (this.state) {
            case State.START:
                this.onStart();
                break;
            case State.END:
                this.onEnd();
                break;
            case State.NORMAL:
                this.onNormal();
                break;
        }
        this.myColor.a = this.A;


       this.a1.drawByTexture(this.app.sb, this.myIco, this.rect, this.myColor, this.angle);
    

    }

    onStateCut() {
        if (nextIco.length != 0) {
            this.state = State.END;
        }
        switch (this.state) {
            case State.START:
                if (this.A == 1 && this.w >= this.maxW && this.h >= this.maxH) {

                    this.state = State.NORMAL;
                }
                break;
            case State.END:
                if (this.A <= 0 ) {
                    this.myIco = nextIco;
                    nextIco = "";
                    this.state = State.START;
                }
                break;
            case State.NORMAL:
                break;
        }
    }

    onStart() {
        switch (this.animationType) {
            case AnimationType.APIN:
                this.onAPINI(true);
                break;
            case AnimationType.ZOOM:
                this.onZOOM(true);
                break;
            case AnimationType.DAESALT:
                this.onDAESALT(true);
                break;
        }
    }
    onEnd() {
        switch (this.animationType) {
            case AnimationType.APIN:
                this.onAPINI(false);
                break;
            case AnimationType.ZOOM:
                this.onZOOM(false);
                break;
            case AnimationType.DAESALT:
                this.onDAESALT(false);
                break;
        }
    }
    onNormal() {
        switch (this.animationType) {
            case AnimationType.APIN:
                //this.onAPINI(true);
                break;
            case AnimationType.ZOOM:
                //this.onZOOM(true);
                break;
            case AnimationType.DAESALT:
               // this.onDAESALT(true);
                break;
        }
    }

    onAPINI(is: boolean) {
        this.angle += (is ? 1 : -1);
        this.angle = BiasAngleCount(this.angle);
    }

    onZOOM(is: boolean) {
        this.w += (is ? 1 : -1);
        this.h += (is ? 1 : -1);
        if (this.w < 0)
            this.w = 0;
        if (this.h < 0)
            this.h = 0;
        
    }
    onDAESALT(is: boolean) {
        this.A += (is ? 0.02 : -0.02);
        if (this.A < 0) {
            this.A = 0;
        }
        if (this.A > 1) {
            this.A = 1;
        }
    }

}

enum State {
    START,//开始动画
    END,//结束动画
    NORMAL,//常态动画
}

enum AnimationType {
    APIN,//旋转
    ZOOM,//缩放
    DAESALT,//淡化

}

class Segment {
    app: QuickApp;
    a1: lighttool.spriteAtlas;
    data: Array<number>;
    centrePoint: MyCoordinates;
    radius: number;
    theAngle: number;
    biasAngle: number;//旋转偏移值

    startDoc: MyCoordinates;
    endDoc: MyCoordinates;
    coor: MyCoordinates;

    init() {
        let canvas = document.getElementById("drawarea") as HTMLCanvasElement;
        this.data;
        this.centrePoint = doc;
        this.radius = 200;
        this.biasAngle = 0;
    }
    constructor(app: QuickApp, a1: lighttool.spriteAtlas) {
        this.a1 = a1;
        this.app = app;
        this.init();
        this.startDoc = new MyCoordinates(0, 0);
        this.endDoc = new MyCoordinates(0, 0);
        this.coor = new MyCoordinates(0, 0);
    }

    onAnimation() {
        this.data = data;
        this.theAngle = 360 / this.data.length;
        this.biasAngle++;
        this.biasAngle = this.onBiasAngleCount(this.biasAngle);
        this.onSewgment(true);
        this.onSewgment(false);
        for (let i = 0; i < this.data.length; i++) {

            TriangleLengthXY(this.centrePoint, this.onBiasAngleCount(this.biasAngle + this.theAngle * i), this.radius + this.data[i] / 2, this.startDoc);
            TriangleLengthXY(this.centrePoint, this.onBiasAngleCount(this.biasAngle + this.theAngle * i), this.radius + -this.data[i] / 2, this.endDoc);
            this.onDrawLine(this.startDoc, this.endDoc);
        }
    }

    onSewgment(is: boolean) {
         TriangleLengthXY(this.centrePoint, this.biasAngle, this.radius + (is ? this.data[0] : -this.data[0]) / 2, this.startDoc);

        for (let i = 1; i < this.data.length; i++) {
            TriangleLengthXY(this.centrePoint, this.onBiasAngleCount(this.biasAngle + this.theAngle * i), this.radius + (is ? this.data[i] : -this.data[i]) / 2, this.endDoc);
            this.onDrawLine(this.startDoc, this.endDoc);
            
            this.startDoc.x = this.endDoc.x;
            this.startDoc.y = this.endDoc.y;
        }
        TriangleLengthXY(this.centrePoint, this.onBiasAngleCount(this.biasAngle + this.theAngle * 0), this.radius + (is ? this.data[0] : -this.data[0]) / 2, this.endDoc);
        this.onDrawLine(this.startDoc, this.endDoc);
    }

    //偏移值越界计算
    onBiasAngleCount(angle: number) {
        if (angle >= 360) {
            angle -= 360;
        }
        return angle;
    }

    onDrawLine(startDoc: MyCoordinates, endDoc: MyCoordinates) {
        let rect = new lighttool.spriteRect();
        rect.x = (endDoc.x - startDoc.x) / 2 + startDoc.x;
        rect.y = (endDoc.y - startDoc.y) / 2 + startDoc.y;
        rect.h = 20;
        rect.w = PointDistance(startDoc, endDoc, this.coor);
        rect.w += rect.w * 0.25;
        this.a1.drawByTexture(this.app.sb, "line", rect, myColor, TriangleRadii(startDoc, endDoc, this.coor));
    }
}



//框架代码
interface IState
{
    onInit(app: QuickApp);
    onUpdate(delta: number);
    onExit();
}
class QuickApp
{
    curState: IState = null;
    changeState(s: IState)
    {
        if (this.curState != null)
        {
            this.curState.onExit();
        }
        this.curState = s;
        if (this.curState != null)
        {
            this.curState.onInit(this);
        }
    }
    divParent: HTMLDivElement;
    webgl: WebGLRenderingContext;
    sb: lighttool.spriteBatcher;
    font: lighttool.spriteFont;
    centerx: number;
    centery: number;
    half: number;
    pointbuf: lighttool.spritePoint[] = [
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
    ];
    constructor(div: HTMLDivElement)
    {
        this.divParent = div;
    }
    start(startFirst: IState)
    {
        //append canvas
        var canvas = document.createElement("canvas");
        canvas.className = "full";
        canvas.style.position = "absolute";
        this.divParent.appendChild(canvas);
        //init webgl;
        this.webgl = <WebGLRenderingContext>canvas.getContext('webgl') ||
            <WebGLRenderingContext>canvas.getContext("experimental-webgl");

        //init 2d
        var shaderparser = new lighttool.shaderParser();
        shaderparser.parseUrl(this.webgl, "res/hud.shader.txt");

        this.sb = new lighttool.spriteBatcher(this.webgl, shaderparser);
        this.sb.ztest = false;

        this.font = new lighttool.spriteFont(this.webgl, "res/f1.font.txt",
            new lighttool.spriteTexture(this.webgl, "res/f1.png", lighttool.textureformat.GRAY, false, true));
        this.changeState(startFirst);
        this.update();

    }
    lasttime: number = Date.now();
    fpstimer: number = 0;
    framecount: number = 0;
    fps: number = 0;

    update()
    {
        var now: number = Date.now();
        var delta = (now - this.lasttime) / 1000.0; //用秒为delta的时间单位

        this.framecount++;
        this.fpstimer += delta;
        if (this.fpstimer > 1.0)
        {
            this.fps = this.framecount / this.fpstimer;
            this.fpstimer = 0;
            this.framecount = 0;
        }

        requestAnimationFrame(() => { this.update(); });
        if (this.webgl.canvas.width != this.divParent.clientWidth || this.webgl.canvas.height != this.divParent.clientHeight)
        {
            var width = this.divParent.clientWidth;
            var height = this.divParent.clientHeight;
            this.webgl.canvas.width = width;
            this.webgl.canvas.height = height;
            this.webgl.canvas.width = width;
            this.webgl.canvas.height = height;
            this.webgl.viewport(0, 0, width, height);
            //this.webgl.drawingBufferWidth = this.width;
            //this.webgl.drawingBufferHeight = this.height;
            var xscale = 1.0 * 2 / this.webgl.drawingBufferWidth;
            var yscale = 1 * -1 * 2 / this.webgl.drawingBufferHeight;
            var xadd = -1;
            var yadd = 1;
            this.sb.matrix = new Float32Array([
                xscale, 0, 0, 0,//去掉asp的影响
                0, yscale, 0, 0,
                0, 0, 1, 0,
                xadd, yadd, 0, 1
            ]);
            this.centerx = width / 2;
            this.centery = height / 2;
            this.half = Math.min(width / 2, height / 2);
        }
        let color = ColorTransition("232643");
        this.webgl.clearColor(color.r, color.g, color.b, 1);
        this.webgl.clear(this.webgl.COLOR_BUFFER_BIT);

        if (this.curState != null)
        {
            this.curState.onUpdate(delta);
        }

        this.sb.endbatch();

        this.lasttime = now;

    }


    drawByCenter(half: number, x: number, y: number, tex: lighttool.spriteTexture, c: lighttool.spriteColor)
    {
        {
            let p = this.pointbuf[0];
            p.x = x - half; p.y = y - half; p.z = 0;
            p.u = 0; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[1];
            p.x = x + half; p.y = y - half; p.z = 0;
            p.u = 1; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[2];
            p.x = x - half; p.y = y + half; p.z = 0;
            p.u = 0; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[3];
            p.x = x + half; p.y = y + half; p.z = 0;
            p.u = 1; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;
        }
        this.sb.setMat(tex.mat);
        this.sb.addRect(this.pointbuf);

    }

    drawByCenterRotate(half: number, x: number, y: number, r: number, tex: lighttool.spriteTexture, c: lighttool.spriteColor)
    {
        {
            var sina = Math.sin(r);
            var cosa = Math.cos(r);

            let p = this.pointbuf[0];
            p.x = x + (-half * cosa + -half * -sina); p.y = y + (-half * sina + -half * cosa); p.z = 0;
            p.u = 0; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[1];
            p.x = x + (half * cosa + -half * -sina); p.y = y + (half * sina + -half * cosa); p.z = 0;
            p.u = 1; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[2];
            p.x = x + (-half * cosa + half * -sina); p.y = y + (-half * sina + half * cosa); p.z = 0;
            p.u = 0; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[3];
            p.x = x + (half * cosa + half * -sina); p.y = y + (half * sina + half * cosa); p.z = 0;
            p.u = 1; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;
        }
        this.sb.setMat(tex.mat);
        this.sb.addRect(this.pointbuf);

    }

}